<template>
  <div class="about">
    <h1>This is an about page</h1>
    <GeoLocation/>
    <NowWeather/>>
  </div>
</template>

<script>
import GeoLocation from '@/components/GeoLocation.vue';
import NowWeather from '@/components/NowWeather.vue';
export default {
  components: {
    GeoLocation,
    NowWeather
  }
}
</script>
<!-- <template>
  <div class="about">
    <div>
      <p>
        <span>{{ location.name }}</span>
        实时天气
      </p>
      <p>数据观测时间：{{ timeFormat }}</p>
    </div>
    <div>
      <p><i :class="iconName"></i></p>
      <p>温度：{{now.temp}}</p>
      <p>体感温度：{{now.feelsLike}}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {API_NOW,KEY } from "@/common/constrant";
import { mapState } from 'vuex';
import dayjs from "dayjs";
import "qweather-icons/font/qweather-icons.css"
export default {
  data() {
    return {
      now:{}
    };
  },
  computed:{
      ...mapState([
      "location"
    ]),
    timeFormat(){
      return dayjs(this.now.obs_time).format('YYYY年MM月DD日 HH时mm分');
    },
    iconName : function(){
      return "qi-" + this.now.icon;
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData(){
      axios.get(API_NOW,{
        params:{
          key: KEY,
          location: this.location.id
        }
      }).then(res=>{
        console.log(res.data);
        this.now = res.data.now;
      })
    }
  },
};
</script>
<style scoped>
i{
  color:red;
  font-size: 3rem;
}
</style> -->
